<!-- 点击我要解谜后出现的页面(双人赛0，单人赛1，道具赛的界面2) -->
<!-- 被toSolvePuzzle.vue引用 -->

<template>
	<view class="selector" @touchmove="onTouchMove" @touchend="onTouchEnd">
		<scroll-view  v-for="(item,index) in items" class="item" :key="index" 
			:class="{active : index=== activeIndex}">
			
			
			<view v-if="index==0" @click="centerItem(0)">
				<view class="itemInner" >
					{{ item }}
					<view class="InnerText" >
						猜谜大吉大利，快来一起对决！
					</view>
					
				</view>
				<view class="copyBack" >
					
				</view>
				<view class="copyBack1" >
					
				</view>
			</view>
			
			
			
			<view v-if="index==1" @click="centerItem(1)">
				<view class="itemInner2" >
					{{ item }}
				
					<view class="InnerText" >
						猜谜大吉大利，快来战胜自己！
					</view>
					
				</view>
				<view class="copyBack2" >
					
				</view>
				<view class="copyBack22" >
					
				</view>
			</view>
			
			
			
			<view v-if="index==2" @click="centerItem(2)">
				<view class="itemInner3" >
					{{ item }}
					
					<view class="InnerText" >
						猜谜大吉大利，快来使出绝活！
					</view>
				</view>
				<view class="copyBack3" >
					
				</view>
				<view class="copyBack33" >
					
				</view>
			</view>
			
			
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			items: {
				type: Array,
				required: true,
			}
		},
		data() {
			return {
				// startY: 0,
				// lastY: 0,
				// activeIndex: 0,
			}
		},
		methods: {
			onTouchMove(event) {
				// const deltaY = event.touches[0].clientY - this.startY;
				// const newIndex = this.activeIndex - Math.round(deltaY / 50); // 每个选项高度为50px
				// if (newIndex >= 0 && newIndex < this.items.length) {
				// 	this.activeIndex = newIndex;
				// 	this.lastY = this.startY + (this.activeIndex * 50);
				// }
			},
			onTouchEnd() {
				// this.startY = this.lastY;
			},
			centerItem(index) {
				
				//type==》 0双人1单人2道具赛
				uni.navigateTo({
					url: '/pages/matchToSolve/matchToSolve?index='+index
				})
			}
		}
	}
</script>

<style>
	.selector {
		height: 600px;
		margin-top: 100rpx;
		/* 设置选择器高度 */
		overflow-y: scroll;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		
		background-color: rgb(182,201,251);
	}
	.InnerText{
		font-weight: 500;
		font-size: 0.8rem;
		color: black;
		font-style: normal;
		text-shadow: none;
		
	}
	.itemInner2{
		width: 96%;
		height: 90%;
		bottom: 20rpx;
		left: 0;
		margin-top: -50rpx;
		z-index: 2;
		
		font-size: 2rem;
		font-weight: bold;
		text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.8);
		line-height: 120rpx;
		
		
		background-color: rgb(147,113,247);
		position: absolute;
		border: 4rpx solid black;
		
		border-radius: 30rpx;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}
	.itemInner3{
		width: 96%;
		height: 90%;
		bottom: 20rpx;
		left: 0;
		margin-top: -50rpx;
		z-index: 2;
		
		font-size: 2rem;
		font-weight: bold;
		text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.8);
		line-height: 120rpx;
		
		
		background-color: rgb(109,191,161);
		position: absolute;
		border: 4rpx solid black;
		
		border-radius: 30rpx;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}
	.itemInner{
		width: 96%;
		height: 90%;
		bottom: 20rpx;
		left: 0;
		margin-top: -50rpx;
		z-index: 2;
		
		font-size: 2rem;
		font-weight: bold;
		text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.8);
		line-height: 120rpx;
		
		
		background-color: rgb(242,202,70);
		position: absolute;
		border: 4rpx solid black;
		
		border-radius: 30rpx;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}
	.copyBack22{
		z-index: 1;
		position: absolute;
		width: 10%;
		height: 90%;
		margin-top: -10rpx;
		bottom: 0;
		border: 4rpx black solid;
		
		right: 0rpx;
		border-radius: 20% 20% 0 100%;
		background-color: rgb(92,59,218);
	}
	.copyBack33{
		z-index: 1;
		position: absolute;
		width: 10%;
		height: 90%;
		margin-top: -10rpx;
		bottom: 0;
		border: 4rpx black solid;
		
		right: 0rpx;
		border-radius: 20% 20% 0 100%;
		background-color: rgb(60,123,97);
	}
	.copyBack1{
		z-index: 1;
		position: absolute;
		width: 10%;
		height: 90%;
		margin-top: -10rpx;
		bottom: 0;
		border: 4rpx black solid;
		
		right: 0rpx;
		border-radius: 20% 20% 0 100%;
		background-color: rgb(230,152,57);
	}
	.copyBack3{
		z-index: 1;
		position: absolute;
		width: 100%;
		right: -30rpx;
		height: 15%;
		top: 270rpx;
		
		border-radius:  10rpx 30% 40% 55% ;
		border: 4rpx black solid;
		background-color: rgb(60,123,97);
	}
	.copyBack2{
		z-index: 1;
		position: absolute;
		width: 100%;
		right: -30rpx;
		height: 15%;
		top: 270rpx;
		
		border-radius:  10rpx 30% 40% 55% ;
		border: 4rpx black solid;
		background-color: rgb(92,59,218);
	}
	.copyBack{
		z-index: 1;
		position: absolute;
		width: 100%;
		right: -30rpx;
		height: 15%;
		top: 270rpx;
		
		border-radius:  10rpx 30% 40% 55% ;
		border: 4rpx black solid;
		background-color: rgb(230,152,57);
	}
	.item {
		text-align: center;
		font-size: 20px;
		color: white;
		
		z-index: 3;
		transition: all 0.3s ease;
		
		height: 306rpx;
		widows: 90%;
		
		margin: auto;

		
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		
		
		
		position: relative;
	}

	.item.active {
		color: #ff0000;
		/* 设置选中项颜色 */
	}
</style>